<template>
  <!-- 搜索栏 -->
  <div class="search-bar" style="display: flex; justify-content: center; margin-bottom: 20px;">
    <!-- 分类选择 -->
    <el-select v-model="selectedCategory" placeholder="选择分类" class="category-select" style="width: 20%; max-width: 150px; margin-right: 10px;">
      <el-option label="全部" value="全部"></el-option>
      <el-option label="弦鸣乐器" value="弦鸣乐器"></el-option>
      <el-option label="体鸣乐器" value="体鸣乐器"></el-option>
      <el-option label="膜鸣乐器" value="膜鸣乐器"></el-option>
      <el-option label="气鸣乐器" value="气鸣乐器"></el-option>
      <el-option label="其他" value="其他"></el-option>
    </el-select>

    <!-- 查询输入框 -->
    <el-input 
      placeholder="搜索乐器" 
      v-model="queryStr" 
      class="input-with-select" 
      style="width: 50%; max-width: 400px; margin-right: 10px;">
    </el-input>

    <!-- 查询按钮 -->
    <el-button 
      class="query-button" 
      @click="queryInfo" 
      style="margin-top: 6px; background-color: transparent; border: 1px solid #dcdfe6; color: #333;">
      查询
    </el-button>

  </div>

  <!-- 乐器列表展示 -->
  <el-row gutter="30">
    <el-col v-for="(instrument, index) in filteredInstrumentList" :key="index" :span="6" class="instrument-item">
      <el-card class="instrument-out">
        <div @click="goToInstrumentDetail(instrument.instrument_id)">
          <img :src="'http://localhost:8080/images/upload/' + instrument.image" alt="乐器封面" class="instrument-cover" />
          <div class="instrument-info">
            <h4>{{ instrument.name }}</h4>
            <p>{{ instrument.type }}</p>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      instrumentList: [], // 用户收藏的所有乐器数据
      filteredInstrumentList: [], // 根据搜索和分类过滤后的乐器列表
      queryStr: '', // 查询条件
      selectedCategory: '全部', // 选择的分类
      userId: sessionStorage.getItem("user_id"), // 获取用户ID
    };
  },
  created() {
    this.fetchCollectionData(); // 初始化获取用户的收藏数据
  },
  methods: {
    fetchCollectionData() {
      // 获取用户收藏的乐器数据
      axios
        .get(`/api/collections/${this.userId}`) // 假设API返回该用户的收藏列表
        .then((response) => {
          this.instrumentList = response.data;
          this.filteredInstrumentList = response.data; // 初始化时显示所有乐器
        })
        .catch((error) => {
          console.error('获取收藏乐器数据失败：', error);
        });
    },

    queryInfo() {
      // 搜索和分类过滤
      let filteredList = this.instrumentList;

      // 如果选择了分类，先根据分类过滤
      if (this.selectedCategory !== '全部') {
        filteredList = filteredList.filter(item => item.type === this.selectedCategory);
      }

      // 根据搜索关键词过滤
      if (this.queryStr.trim().length > 0) {
        filteredList = filteredList.filter(item => item.name.includes(this.queryStr.trim()));
      }

      // 更新显示的过滤后的数据
      this.filteredInstrumentList = filteredList;
      console.log('queryInfo()......' + this.queryStr);
    },

    goToInstrumentDetail(instrumentId) {
      // 使用 $router.push 跳转到乐器详情页
      this.$router.push(`/instrument/${instrumentId}`);
    },
  },
};
</script>

<style>
.instrument-out {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: hidden;
}

.instrument-item {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}

.instrument-cover {
  width: 100%;
  height: 200px; /* 固定图片的高度，确保占据卡片的上方区域 */
  object-fit: cover; /* 确保图片填充区域，不变形 */
}

.instrument-info {
  padding: 10px;
  flex-grow: 1; /* 让文本区域填充剩余空间 */
  text-align: center;
}

.instrument-info h4 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-top: 10px;
}

.instrument-info p {
  font-size: 14px;
  color: #777;
}

.search-bar {
  margin-bottom: 20px;
  text-align: center;
}

.category-select {
  margin-right: 10px;
}

.input-with-select {
  margin-right: 10px;
}

/* 新增：查询按钮样式 */
.query-button {
  background-color: transparent; /* 背景透明 */
  border: 1px solid #dcdfe6; /* 边框样式 */
  color: #333; /* 字体颜色 */
  height: 36px; /* 按钮高度 */
  line-height: 36px; /* 垂直居中 */
  font-size: 14px; /* 字体大小 */
}

.query-button:hover {
  background-color: #f5f7fa; /* 鼠标悬停时背景色 */
  border-color: #dcdfe6; /* 保持边框颜色 */
}

.query-button:focus {
  outline: none; /* 取消焦点样式 */
}
</style>
